<template>
  <div class="prince">
    <h4>{{name}}</h4>
    <img :src=imgsrc alt="">
    <div class="txt">
      {{txt}}
    </div>
  </div>
</template>
<script>
  // 定义全局指令
  /*Vue.directive('img',{
    inserted:function(el, binding){
      var color = Math.floor(Math.random()*1000000);
      el.style.backgroundColor = "#" + color;
      var img = new Image();
      img.src = binding.value; //获得传给指令的值
      img.onload = function(){
        el.style.backgroundImage = 'url(' + binding.value + ')';
      }
    }
  })*/

  import img from "../assets/xmg.jpg"

  export default {
    name: "rose",
    
    data(){
      return{
        name:"小玫瑰",
        imgsrc: img,
        txt:"不懂爱情且略有“矫情”的花儿。她的内心爱慕、依赖、渴望着小王子，但是自身性格的缺陷却使她不能完全表达自己对小王子的情谊，导致小王子出走。但在离开的日子里，小王子内心一直存在着花儿。她与小王子之间是共度过长久时间的陪伴，象征着令人烦恼但又美丽的爱情。"
      }
    }
  }
</script>
<style scoped>
  img{
    padding: 10px 0;
    max-width: 400px;
  }
  .txt{
    margin: 10px 0;
  }
</style>